<template>
    <div class="person">
        <div>
            <template>
                <el-carousel
                    :interval="4000"
                    type="card"
                    height="200px"
                    class="imgBanner"
                >
                    <el-carousel-item
                        v-for="(item, index) in imgList"
                        :key="index"
                    >
                        <img :src="item.imgSrc" alt="" />
                    </el-carousel-item>
                </el-carousel>
            </template>
        </div>
        <div>
            <template>
                <div>
                    <el-button @click="show3 = !show3" round
                        >显示/隐藏</el-button
                    >
                    <div style="margin-top: 20px; height: 200px">
                        <el-collapse-transition>
                            <div v-show="show3">
                                <div class="transition-box">
                                    <h3>订单</h3>
                                    <!-- 表格区域 -->
                                    <template>
                                        <el-table :data="ordersList">
                                            <el-table-column
                                                prop="startTime"
                                                label="下单时间"
                                            >
                                            </el-table-column>
                                            <el-table-column label="出租方">
                                                <template slot-scope="scope">
                                                    <span
                                                        style="
                                                            margin-left: 10px;
                                                        "
                                                        >{{
                                                            scope.row.parkingsId
                                                                .lessorsId
                                                                .account
                                                        }}</span
                                                    >
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="出租方电话">
                                                <template slot-scope="scope">
                                                    <span
                                                        style="
                                                            margin-left: 10px;
                                                        "
                                                        >{{
                                                            scope.row.parkingsId
                                                                .lessorsId.phone
                                                        }}</span
                                                    >
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="车位地址">
                                                <template slot-scope="scope">
                                                    <span
                                                        style="
                                                            margin-left: 10px;
                                                        "
                                                        >{{
                                                            scope.row.parkingsId
                                                                .address
                                                        }}</span
                                                    >
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="租客">
                                                <template slot-scope="scope">
                                                    <span
                                                        style="
                                                            margin-left: 10px;
                                                        "
                                                        >{{
                                                            scope.row.tenantsId
                                                                .name
                                                        }}</span
                                                    >
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="车位号">
                                                <template slot-scope="scope">
                                                    <span
                                                        style="
                                                            margin-left: 10px;
                                                        "
                                                        >{{
                                                            scope.row.parkingsId
                                                                .number
                                                        }}</span
                                                    >
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="状态">
                                                <template slot-scope="scope">
                                                    <span
                                                        v-if="
                                                            scope.row.state ==
                                                            '2'
                                                        "
                                                        style="color: green"
                                                        >已支付</span
                                                    >
                                                    <span
                                                        v-else
                                                        style="color: red"
                                                        >已完成</span
                                                    >
                                                </template>
                                            </el-table-column>
                                            <el-table-column label="操作">
                                                <template slot-scope="scope">
                                                    <el-button
                                                        v-if="
                                                            scope.row.state ==
                                                            '2'
                                                        "
                                                        size="small"
                                                        round
                                                        @click="
                                                            backParkings(
                                                                scope.row._id
                                                            )
                                                        "
                                                        >归还车位</el-button
                                                    >
                                                    <el-button
                                                        v-else
                                                        size="small"
                                                        round
                                                        disabled
                                                        >归还车位</el-button
                                                    >
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </template>
                                </div>
                                <div class="transition-box">
                                    <h3>个人资料</h3>
                                    <div style="margin: 30px 0px 30px 0px">
                                        <el-input
                                            style="width: 250px"
                                            v-model="name"
                                            placeholder="姓名"
                                        ></el-input>
                                    </div>
                                    <div style="margin: 30px 0px 30px 0px">
                                        <el-input
                                            style="width: 250px"
                                            v-model="IDCard"
                                            placeholder="身份证信息"
                                            disabled
                                        ></el-input>
                                    </div>
                                    <div style="margin: 30px 0px 30px 0px">
                                        <el-input
                                            style="width: 250px"
                                            v-model="phone"
                                            placeholder="手机号码"
                                        ></el-input>
                                    </div>
                                    <div>
                                        <el-button
                                            round
                                            :loading="load"
                                            @click="upData"
                                            >确认修改</el-button
                                        >
                                    </div>
                                </div>
                            </div>
                        </el-collapse-transition>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>
    
<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions: ordersMapActions } = createNamespacedHelpers("orders"); //主仓库引入子仓库的名称,
const { mapActions: tenantsMapActions } = createNamespacedHelpers("tenants"); //主仓库引入子仓库的名称,
const { mapActions: parkingsListMapActions } = createNamespacedHelpers(
    "parkingList"
);
//主仓库引入子仓库的名称
export default {
    props: ["id"],
    data() {
        return {
            imgList: [
                {
                    imgSrc: require("./images/0152b35fb33bb511013ee04dab3ca7.jpg"),
                },
                {
                    imgSrc: require("./images/0199cb5fb3420211013fdcc72626bc.png"),
                },
                {
                    imgSrc: require("./images/01235a5fb2697d11013ee04d9352be.jpg"),
                },
                {
                    imgSrc: require("./images/01dc355fb341f011013fdcc7499c2d.png"),
                },
                { imgSrc: require("./images/the_lion_king.jpg") },
            ],
            show3: false,
            ordersList: [],
            name: "",
            phone: "",
            IDCard: "",
            load: false,
        };
    },
    methods: {
        ...parkingsListMapActions(["backParking"]),
        ...tenantsMapActions(["changeTenantsById"]),
        ...ordersMapActions(["searchById", "changeOrdersState"]),
        //上传信息
        async upData() {
            const data = await this.changeTenantsById({
                id: this.id,
                name: this.name,
                phone: this.phone,
            });
            // console.log(data);
            this.load = !this.load;
            setTimeout(() => {
                this.load = !this.load;
                this.$alert("<strong>修改成功</strong>", {
                    dangerouslyUseHTMLString: true,
                });
            }, 2000);
        },
        //归还车位
        async backParkings(val) {
            //修改车位的状态
            //获得车位的_id
            const parkingsId = this.ordersList[0].parkingsId._id;
            const data = await this.backParking(parkingsId);
            //修改订单
            const ordersId = this.ordersList[0]._id;
            this.changeOrdersState(val);
            //刷新页面
            this.searchById(this.id);
        },
    },
    async mounted() {
        const data = await this.searchById(this.id);
        this.ordersList = data;
        // console.log(data);
        this.name = data[0].tenantsId.name;
        this.IDCard = data[0].tenantsId.IDCard;
        this.phone = data[0].tenantsId.phone;
    },
};
</script>

<style>
.imgBanner img {
    width: 100%;
}
.transition-box {
    margin-bottom: 10px;
    width: 100%;
    border-radius: 4px;
    background-color: #409eff;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
}
</style>